<?php
/**
 * 正则
 */
$this->title = 'My Yii Application';
$css = <<<CSS

CSS;

$this->registerCss($css);

$js = <<<JS
$(document).ready(function (){
    $("#textSour").focus();
        $("#existe li a").click(function (){
            $("#textPattern").val($(this).attr("title")).focus();
            //onMatch();
        });
        
        $('#match').click(onMatch);
        $('#replace').click(onReplace);
    });

    function setVisible(idElement, visible) {
        var obj = document.getElementById(idElement);
        obj.style.visibility = visible ? "visible" : "hidden";
    }
    function isValidFields() {
        var textSour = document.getElementById("textSour");
        if (null==textSour.value || textSour.value.length<1) {
            textSour.focus();
            alert("请输入待匹配文本");
            return false;
        }
        var textPattern = document.getElementById("textPattern");
        if (null==textPattern.value || textPattern.value.length<1) {
            textPattern.focus();
            alert("请输入正则表达式");
            return false;
        }
        return true;
    }
    function buildRegex() {
        var op = "";
        if (document.getElementById("optionGlobal").checked)op = "g";
        if (document.getElementById("optionIgnoreCase").checked)op = op + "i";
        return new RegExp(document.getElementById("textPattern").value, op);
    }
    function onMatch() {
        if (!isValidFields())
            return false;
        document.getElementById("textMatchResult").value = "";
        var regex = buildRegex();
        var result = document.getElementById("textSour").value.match(regex);
        if (null==result || 0==result.length) {
            document.getElementById("textMatchResult").value = "（没有匹配）";
            return false;
        }
        if (document.getElementById("optionGlobal").checked) {
            var strResult = "共找到 " + result.length + " 处匹配：";
            for (var i=0;i < result.length;++i)strResult = strResult + result[i] + "";
            document.getElementById("textMatchResult").value = strResult;
        }
        else {
            document.getElementById("textMatchResult").value= "匹配位置：" + regex.lastIndex + "匹配结果：" + result[0];
        }
        return true;
    }
    function onReplace() {
        var str = document.getElementById("textSour").value;
        var regex = buildRegex();
        document.getElementById("textReplaceResult").value= str.replace(regex, document.getElementById("textReplace").value);
    }
    function reset()
    {
        $("#textSour").val("");
        $("#textPattern").val("");
        $("#textMatchResult").val("");
        $("#textReplace").val("");
        $("#textReplaceResult").val("");
    }

JS;
$this->registerJs($js);


?>

<div class="site-index">
    <div class="body-content">

        <h3>在线正则表达式测试</div>
    <hr/>
    <span>
        <span class="col-lg-8">
            <div class="form-group">
                <textarea id="textSour" tabindex="1" class="form-control" placeholder="在此输入待匹配文本" rows="4"></textarea>
            </div>
            <form class="well form-inline ">
                <div class="row">
                    <span>
                        <label>正则表达式:</label><input type="text" id="textPattern" placeholder="在此输入正则表达式" class="form-control input-lg"></input>
                    </span>
                    <span class="text-center">
                        <label class="checkbox"><input type="checkbox" value="global" checked="checked" id="optionGlobal" name="optionGlobl"/>全局搜索</label>
                        <label class="checkbox"><input type="checkbox" value="ignoreCase" id="optionIgnoreCase" name="optionIgnoreCase"/>忽略大小写</label>
                        <a id="match" class="btn btn-primary col-xs-12 col-lg-2 col-md-2 col-sm-2" style="display: inline-block;float:initial !important;">测试匹配</a>
                    </span>

                </div>
            </form>
            <div class="form-group">
                <div class="title">匹配结果：</div>
                <textarea readonly="readonly" id="textMatchResult" class="form-control" rows="4"></textarea>
            </div>
            <form class="well form-inline container-fluid">
                <div class="row">

                        <span>
                        <label>替换文本:</label><input type="text" id="textReplace"
                                                               class="form-control input-lg"
                                                               placeholder="在此输入替换文本"></input>
                        </span>
                        <span>
                        <a id="replace" class="btn btn-primary col-xs-12 col-lg-2 col-md-2 col-sm-2" style="display: inline-block;float:initial !important;"><i
                                    class="icon-chevron-down icon-white"></i>替换</a>
                        </span>

                </div>
            </form>
            <div class="form-group">
                <div class="title">替换结果：</div>
                <textarea readonly="readonly" id="textReplaceResult" class="form-control" rows="4"></textarea><br/>
            </div>
        </div>
        <div class="col-lg-4">
            <ul class="nav nav-list well" id="existe" style="height: 600px;overflow-y: scroll">
                <li class="nav-header"><i class="icon-list icon-black"></i>常用正则表达式</li>
                <?php
                foreach ($list as $one) {
                ?>
                    <li><a href="#" title="<?php echo $one['regexp']?>"><?php echo $one['title']?></a></li>
                <?php
                }
                ?>
                <li><a href="#" title="[^\x00-\xff]">匹配双字节字符(包括汉字在内)</a></li>
                <li><a href="#" title="\n\s*\r">匹配空白行</a></li>
                <li><a href="#" title="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">匹配Email地址</a></li>
                <li><a href="#" title="[a-zA-z]+://[^\s]*">匹配网址URL</a></li>
                <li><a href="#" title="\d{3}-\d{8}|\d{4}-\{7,8}">匹配国内电话号码</a></li>
                <li><a href="#" title="[1-9][0-9]{4,}">匹配腾讯QQ号</a></li>
                <li><a href="#" title="[1-9]\d{5}(?!\d)">匹配中国邮政编码</a></li>
                <li><a href="#" title="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$">匹配18位身份证号</a></li>
                <li><a href="#"
                       title="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))">匹配(年-月-日)格式日期</a>
                </li>
                <li><a href="#" title="^[1-9]\d*$">匹配正整数</a></li>
                <li><a href="#" title="^-[1-9]\d*$">匹配负整数</a></li>
                <li><a href="#" title="^-?[1-9]\d*$">匹配整数</a></li>
                <li><a href="#" title="^[1-9]\d*|0$">匹配非负整数（正整数 + 0）</a></li>
                <li><a href="#" title="^-[1-9]\d*|0$">匹配非正整数（负整数 + 0）</a></li>
                <li><a href="#" title="^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$">匹配正浮点数</a></li>
                <li><a href="#" title="^-[1-9]\d*\.\d*|-0\.\d*[1-9]\d*$">匹配负浮点数</a></li>
            </ul>
        </div>
    </div>
</div>
</div>

